<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>      
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@include file= "/WEB-INF/pages/base/commImportPage.jsp" %>
<html>
<head>
    <title>用户组管理</title>
    <meta charset="utf-8">
    <!--[if lt IE 9]><script src="${resourcePath}/js/comm/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="${resourcePath}/tags/bootstrap/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/comm/base_v3.0.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/pipedata.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/comm/paging.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/settings.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/comm/Package.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/new/pig.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/insp.css">
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/comm/NewBtn.css">
</head>
<body class="body-pad" style="padding-bottom:100px">
	<input type="hidden" id="pagePath" value="${pageContext.request.contextPath}"/>
	<input type="hidden" id="resourcePath" value="${resourcePath}"/>
	<input type="hidden" id="groupId" value=""/>
	<input type="hidden" id="authorizeGroupUser" value=""/>
<div class="html-header" style="background-color:white">
    <p class="header-title" style="margin-left:20px"><em class="seting-yhzgl"></em>用户组管理</p>
</div>
<div class="container-fluid warp insp-container">
    <div class="row-fluid  bg-white1">
        <div class="main clearFix">
            <div class="cxtj clearFix">
                <div class="fxgl">
                    <p class="fxgl-title">用户组名称</p>
                    <div class="sel w320">
                        <input type="text" placeholder="输入名称"  class="new-input"/>
                    </div>
                </div>
                <div class="fxgl">
                    <p class="fxgl-title">用户组编号</p>
                    <div class="sel w320">
                        <input type="text" placeholder="输入编号"  class="new-input"/>
                    </div>
                </div>
                <p class="fxgl-title" style="color:white;margin-bottom:10px">ioio</p>
                <a href="javascript:void(0)" class="zy-button zy-search" type="button" onclick="searchUserGroup(this)";style="padding:10px 35px 11px 35px;"><i class="zy-search-icon"></i>查询</a>
                <div style="clear:both"></div>
                <p class="tool pad20" style="margin:8px 0  10px 0;text-align:left;width:100%;padding:0">
                    <a class="btn btn-w100 btn-add-icon btn-h30" href="javascript:void(0);" onclick="showDialog('add')" style="margin-left:0"><em></em>新建</a>
                    <a  href="javascript:void(0);"  class="btn btn-w100 btn-copy-icon btn-h30" onclick="deleteData('multiple')"><em></em>删除</a>
                    <a href="javascript:void(0);" class="btn btn-w100 btn-stop-bg btn-h30" onclick="dataOnOrOff('off')"><em></em>停用</a>
                    <a href="javascript:void(0);" class="btn btn-w100 btn-qy-bg btn-h30" onclick="dataOnOrOff('on')"><em></em>启用</a>
                </p>
                <div style="clear:both"></div>
                <div class="l-r clearFix pad20">
                    <div class="left">
                        <div class="info-header clearFix">
                            <ul class="ul-header" style="border-bottom:1px solid #d7dde9">
                                <li class="sw5" style="width:5%">
                                <span class="table-ck" >
                                    <span name="checkAll" class="check-box selected " onclick=""><i></i></span>
                                </span>
                                </li>
                                <li class="sw15-1" style="width:25%">用户组名称</li>
                                <li class="sw15-2" style="width:20%">用户组编号</li>
                                <li class="sw15-1-03" style="width:10%">创建人</li>
                                <li class="sw15-1" style="width:20%">备注</li>
                                <li class="sw15-3-01" style="width: 5%">状态</li>
                                <li class="sw15-4-01 no-right" style="width:15%">编辑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 授权</li>
                            </ul>
                            <div class="div-scrol" id="searchBody" style="border-bottom:1px solid #d7dde9">
                                <c:if test="${empty requestScope.main}">
                                    <div class="no-data ">
                                        <img src="${resourcePath}/images/pig/no-data.png" alt=""/>
                                    </div>
                                </c:if>
                                <c:if test="${not empty requestScope.main}">
                                    <c:forEach var="ps" items="${requestScope.main}" varStatus="status">
                                        <div class="info-tr">
                                            <ul class="<c:if test="${status.index%2 eq 0}">ul-header bg-white</c:if> <c:if test="${status.index%2 ne 0}">ul-header bg-second</c:if>">
                                                <li class="sw5" style="width:5%">
		                                    <span class="table-ck">
		                                         <span name="checkSingle" class="check-box selected" onclick="" id="${ps.ID }"><i></i></span>
		                                    </span>
                                                </li>
                                                <li class="sw15" style="width:25%">${(not empty ps.NAME && "" ne fn:trim(ps.NAME)) ? ps.NAME: '-'}</li>
                                                <li class="sw15" style="width:20%">${(not empty ps.CODE && "" ne fn:trim(ps.CODE)) ? ps.CODE: '-'}</li>
                                                <li class="sw15" style="width:10%">${(not empty ps.CREATEUSER && "" ne fn:trim(ps.CREATEUSER)) ? ps.CREATEUSER: '-'}</li>
                                                <li class="sw15" style="width:20%">${(not empty ps.REMARK && "" ne fn:trim(ps.REMARK)) ? ps.REMARK: '-'}</li>
                                                <li class="sw15-2-0" style="width: 5%"><em style='margin-left:-4px';onclick='changeState(this);' class="<c:if test="${ps.STATE == 'LOCKED'}">on-off</c:if> <c:if test="${ps.STATE == 'ACTIVATE'}">on-off active</c:if>"></em></li>
                                                <li class="sw15-4-01 no-right" style="width:15%;position:relative">
                                                    <a href="javascript:void(0);"  class="edit0" onclick="showDialog(this);" style='position:absolute;margin-left:-66px;top:50%;margin-top:-12px'></a>
                                                    <a href="javascript:void(0);"  class="delet1" onclick="deleteData(this);" style='position:absolute;margin-left:-14px;top:50%;margin-top:-14px'></a>
                                                    <a href="javascript:void(0);"  data-toggle="modal" class="shouquan" onclick="groupAuthorize(this);" style='position:absolute;margin-left:38px;top:50%;margin-top:-14px'></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </c:forEach>
                                </c:if>
                            </div>

                        </div>
                    </div>
                </div>
            </div>






        </div>
    </div>
</div>
<!--新建弹出层-->
<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:800px;margin-left:-400px;left:50%;height: 360px;margin-top:-180px;top:50%">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="PopupTitle" style="text-align:center">新建用户组信息</h3>
    </div>
    <div class="modal-body copy-tan">
        <ul class="ul-title">
            <li><span style="color: red">*&nbsp;</span>用户组名称 </li>
            <li>用户组编号</li>
        </ul>
        <ul class="u-info">
            <li class="li1" style="border-bottom:none">
                <div class="sel w410" style="width:100%">
                    <input type="text" placeholder="用户组名称"  style="width:100%;margin-top:5px" id="groupName">
                </div>
            </li>
            <li class="li1" style="border-bottom:none">
                <div class="sel w410" style="width:100%">
                    <input type="text" placeholder="用户组编号" style="width:100%;margin-top:5px" id="groupCode">
                </div>
            </li>
        </ul>
        <p class="qg-text" style="margin-top:30px;width:100%"><textarea rows="" cols="" placeholder="备注" id="groupRemark"></textarea></p>
    </div>
    <div class="modal-footer" style="text-align:center">
        <button class="btn btn-w140 btn-save-icon btn-h40" id="ddd" onclick="save();"><em style="top:10px;left:35px"></em>确定</button>
    </div>
</div>
<!--授权-->
<div id="sh" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="PopupTitle" style="text-align:center">用户组角色授权</h3>
    </div>
    <div class="modal-body copy-tan">
        <ul class="ul-title">
            <li>用户组名称</li>
        </ul>
        <div style="clear:both"></div>
        <ul class="u-info">
            <li class="li1">
                <span class="s1"></span>
            </li>
        </ul>
        <div style="clear:both"></div>
        <div class="left-right">
            <span class="choice">选择角色</span>
            <div class="main-l">
                <div class="left-ch">
                   <p class="p-top"><em></em><span>未选择角色</span></p>
                    <ul>
                    </ul>
                </div>
                <div class="middle-ch">
                  <p class="p-fi"><img class="left-icon" src="${resourcePath}/images/setting/right.png" alt=""/></p>
                  <p><img class="right-icon"src="${resourcePath}/images/setting/left.png" alt=""/></p>
                </div>
                <div class="right-ch">
                   <p class="p-top"><em></em><span>已选择角色</span></p>
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="text-align:center">
        <button class="btn btn-w140 btn-save-icon btn-h40" id="ddd" onclick="saveAuthorize();"><em style="top:10px;left:35px"></em>确定</button>
    </div>
</div>
<script src='${resourcePath}/tags/laydate/laydate.js' type='text/javascript'></script>
<script src="${resourcePath}/js/comm/build.js"></script>
<script src="${resourcePath}/tags/bootstrap/bootstrap.min.js"></script>
<script src="${resourcePath}/tags/laydate/laydate.js"></script>
<!--<script src="${resourcePath}/tags/dateTag.js"></script>-->
<script src="${resourcePath}/js/comm/base_v3.0.js"></script>
<script src='${pageContext.request.contextPath}/js/user/userGroupManager.js' type='text/javascript'></script>
<!-- <script type="text/javascript">
    $(function(){
        $('.on-off').on('click',function(){
            $(this).hasClass('active')?$(this).removeClass('active'):$(this).addClass("active")
        })
        $('.right-ch li').on('click',function(){
            $(this).addClass('active');
        })
        $('.left-ch li').on('click',function(){
            $(this).addClass('active');
        })
        $('.left-icon').on('click',function(){

            $('.right-ch ul ').append($('.left-ch ul li.active'));
            $('.right-ch ul li.active').removeClass("active");
        })
        $('.right-icon').on('click',function(){
            $('.left-ch ul ').append($('.right-ch ul li.active'));
            $('.left-ch ul li.active').removeClass("active");
        })
    })
</script> -->
</body>
</html>